<template>
  <el-card>
    <el-row>
      <el-col :span="4">
        <el-button type="primary" size="mini" @click="dialogVisible = true">新增图片</el-button>
      </el-col>
      <el-col :span="8">
        <span>图片类型：</span>
        <el-select v-model="imageType" placeholder="请选择" @change="change">
          <el-option v-for="item in imageTypes" :key="item.code" :label="item.msg" :value="item.code">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-table :data="images" highlight-current-row stripe v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="#fafafa" style="width: 50%; margin-top: 10px;">
      <el-table-column type="index" label="编号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="uid" label="UID" align="center">
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.url">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteImage(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加图片" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <div style="display: flex;flex-direction: column;align-items: center;">
        <div>
          <span>图片类型：</span>
          <el-select v-model="addImageType" placeholder="请选择">
            <el-option v-for="item in imageTypes" :key="item.code" :label="item.msg" :value="item.code">
            </el-option>
          </el-select>
        </div>
        <el-upload ref="upload" action="action" :http-request="addImage" :on-change="handleChange"
          :on-remove="handleRemove" :auto-upload="false" :show-file-list="false">
          <div v-if="!imageUrl" style="padding: 30px 0px;">
            <i class="el-icon-plus avatar-uploader-icon" slot="trigger"></i>
          </div>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <el-image v-if="imageUrl" style="width: 100px; padding: 30px 0px;" fit="fit" :src="imageUrl"
          :preview-src-list="imageUrlList">
        </el-image>
        <div style="margin-top: 15px;">
          <el-button type="danger" size="small" style="width: 100px;" round @click="handleRemove">重置</el-button>
          <el-button type="primary" size="small" style="width: 100px; margin-left: 50px;" round @click="submitUpload">保存
          </el-button>
        </div>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
  import {
    listImages,
    getDic,
    deleteImage,
    addImage
  } from '../../apis/XcxApi'
  export default {
    name: 'ImageInfo',
    data() {
      return {
        imageType: null,
        imageTypes: [],
        images: [],
        dialogVisible: false,
        file: null,
        addImageType: null,
        imageUrl: '',
        imageUrlList: [],
        loading: false
      }
    },
    created() {
      this.getDic()
    },
    methods: {
      listImages() {
        this.loading = true
        listImages({
          type: this.imageType
        }).then(res => {
          if (res.data) {
            this.images = res.data
          } else {
            this.images = []
          }
          this.loading = false
        })
      },
      getDic() {
        getDic({
          type: 'imageType'
        }).then(res => {
          this.imageTypes = res.data
        })
      },
      change() {
        this.listImages()
      },
      deleteImage(image) {
        deleteImage({
          id: image.id,
          url: image.url
        }).then(res => {
          if (res.data > 0) {
            this.$message.success('删除成功')
            this.listImages()
          } else {
            this.$message.error('删除失败')
          }
        })
      },
      addImage() {
        let formData = new FormData()
        formData.append('file', this.file.raw)
        formData.append('type', this.addImageType)
        addImage(formData).then(res => {
          if (res.data > 0) {
            this.$message.success('操作成功')
            this.dialogVisible = false
            if(this.imageType){
              this.listImages()
            }
          } else {
            this.$message.error('操作失败')
          }
        })
      },
      handleRemove() {
        this.imageUrl = ''
        this.imageUrlList = []
      },
      handleChange(file) {
        console.log(file)
        const isJPG = file.raw.type === 'image/jpeg'||file.raw.type === 'image/png';
        const isLt2M = file.raw.size / 1024 / 1024 < 0.2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 200KB!')
          return false
        }
        this.file = file
        this.imageUrl = URL.createObjectURL(file.raw)
        this.imageUrlList.push(this.imageUrl)
      },
      // 提交上传
      submitUpload() {
        this.$refs.upload.submit();
      },
      // 关闭对话框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #DCDFE6;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
